<template>
  <div class="myclass">
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">李老师讲解企业战略</div>
                    <div class="state_check">
                      <div class="state">已结课</div>
                      <div class="check">浏览</div>
                    </div>
                </div>
            </li>
        </ul>
  </div>
</template>

<script>
export default {
  name: "myclass",
  data() {
    return {
      src: ""
    };
  },
  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {}
};
</script>
<style scoped lang="less">
.myclass {
  background: #ffffff;
  .all_class {
    padding: 0 0.15rem;
    li {
      border-top: 0.01rem solid #f0f1f4;
      padding: 0.15rem 0;
      display: flex;
      .left {
        width: 1.1rem;
        height: 0.8rem;
        border-radius: 0.05rem;
        img {
          width: 1.1rem;
          height: 0.8rem;
          border-radius: 0.05rem;
        }
      }
      .right {
        flex: 1;
        padding-left: 0.13rem;
        .name {
          height: 0.24rem;
          width:1.8rem;
          line-height: 0.24rem;
          color: #333333;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          word-wrap: break-word;
        }
        .state_check {
          height: 0.3rem;
          line-height: 0.3rem;
          margin-top: 0.26rem;
          display: flex;
          .state {
            flex: 1;
            color: #999999;
            height: 0.3rem;
            line-height: 0.3rem;
            font-size: 0.11rem;
          }
          .check {
            height: 0.3rem;
            line-height: 0.3rem;
            width: 0.65rem;
            font-size: 0.12rem;
            border-radius: 0.05rem;
            text-align: center;
            background: -webkit-linear-gradient(
              right,
              #24ceae,
              #6cd48d
            ); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(
              right,
              #24ceae,
              #6cd48d
            ); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(
              right,
              #24ceae,
              #6cd48d
            ); /* Firefox 3.6 - 15 */
            background: linear-gradient(right, #24ceae, #6cd48d); /* 标准的语法 */
          }
        }
      }
    }
  }
}
</style>


